<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <title>提现记录</title>
    <div data-th-replace="layout/head"></div>
</head>
<body>
<header class="bar bar-nav">
    <a class="button button-link button-nav pull-left goBack">
        <span class="iconfont icon-fanhui"></span>
    </a>
    <a href="" class="button button-link button-nav pull-right">
        <span class="fs4 c-fff vam"> 账号管理</span>
    </a>
    <h1 class='title'>提现记录</h1>
</header>
<div class="content wm-content ovf">
    <div class="wm-buttons-tab__wrap wm-buttons-select-tab__wrap">
        <div class="buttons-tab wm-buttons-tab">
            <a href="#tab1" class="tab-link button">提现状态 <i class="icon icon-down"></i></a>
            <a href="#tab2" class="tab-link button">提现时间 <i class="icon icon-down"></i></a>
        </div>
    </div>
    <div class="wm-cl__wrap">
        <div class="wm-cl-search__wrap wm-page-course">
            <div class="tabs">
                <section class="tab" id="tab1">
                    <div class="pl5 pr5 wm-sort-tj">
                        <div class="list-block no-mt">
                            <ul id="filter-order">
                                <li class="item-content item-link active" data-order="0">
                                    <div class="item-inner">
                                        <div class="item-title">默认全部</div>
                                        <div class="item-after"><em class="iconfont icon-duihao"></em></div>
                                    </div>
                                </li>
                                <li class="item-content item-link" data-order="1">
                                    <div class="item-inner">
                                        <div class="item-title">已提现</div>
                                        <div class="item-after"><em class="iconfont icon-duihao"></em></div>
                                    </div>
                                </li>
                                <li class="item-content item-link" data-order="1">
                                    <div class="item-inner">
                                        <div class="item-title">审核中</div>
                                        <div class="item-after"><em class="iconfont icon-duihao"></em></div>
                                    </div>
                                </li>
                                <li class="item-content item-link" data-order="1">
                                    <div class="item-inner">
                                        <div class="item-title">未通过</div>
                                        <div class="item-after"><em class="iconfont icon-duihao"></em></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </section>
                <section class="tab" id="tab2">
                    <div class="wm-nav-sx__wrap">
                        <div class="wm-nav-tab-sx">
                            <section class="pl5 pr5 ml5 mt5 pb5 pt5">
                                <div>
                                    <span class="c-888 fs4">按年份</span>
                                    <ul class="row sort-subject-ul" id="filter-year">
                                        <li class="col-25 active">
                                            <a href="" class="button button-round">全部</a>
                                        </li>
                                        <li class="col-25" data-year="2016"><a href="javascript:void(0)" class="button button-round">2016</a></li><li class="col-25" data-year="2017"><a href="javascript:void(0)" class="button button-round">2017</a></li><li class="col-25" data-year="2018"><a href="javascript:void(0)" class="button button-round">2018</a></li><li class="col-25" data-year="2019"><a href="javascript:void(0)" class="button button-round">2019</a></li><li class="col-25" data-year="2020"><a href="javascript:void(0)" class="button button-round">2020</a></li><li class="col-25" data-year="2021"><a href="javascript:void(0)" class="button button-round">2021</a></li></ul>
                                </div>
                            </section>
                        </div>
                        <div class="modal-buttons card-footer">
                            <span class="modal-button" id="filter-clean">清空筛选</span>
                            <span class="modal-button modal-button-bold" id="filter-ensure">确定</span>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div class="modal-overlay"></div>
    </div>
    <article class="page-infinite__wrap courses-list-page__wrap">
        <div class="page-group">
            <div id="page-infinite-scroll-bottom" class="page page-current">
                <div class="content infinite-scroll native-scroll record_wrap" data-type='native' data-distance="100">
                    <div class="card u-myAccount-infinite-card" style="height: auto">
                        <div class="card-header">
                            <strong class="fs7">2018年</strong>
                        </div>
                        <div class="card-content">
                            <div class="card-content-inner">
                                <div class="list-block">
                                    <div class="pl75">
                                        <section class="item-inner">
                                            <section>
                                                <aside><span class="fs7">微信</span></aside>
                                                <span class="fs4 c-888">提：11.20 20:22 / 到：11.58 10:34</span>
                                            </section>
                                            <section class="text-right">
                                                <aside><span class="fs4">￥</span><span>233</span></aside>
                                                <span class="c-green fs4">已提现</span>
                                            </section>
                                        </section>
                                        <section class="item-inner">
                                            <section>
                                                <aside><span class="fs7">支付宝</span></aside>
                                                <span class="fs4 c-888">提：11.20 20:22 / 到：11.58 10:34</span>
                                            </section>
                                            <section class="text-right">
                                                <aside><span class="fs4">￥</span><span>233</span></aside>
                                                <span class="c-orange fs4">审核中</span>
                                            </section>
                                        </section>
                                        <section class="item-inner">
                                            <section>
                                                <aside><span class="fs7">微信</span></aside>
                                                <span class="fs4 c-888">提：11.20 20:22 / 到：11.58 10:34</span>
                                            </section>
                                            <section class="text-right">
                                                <aside><span class="fs4">￥</span><span>233</span></aside>
                                                <span class="c-red fs4">未通过</span>
                                                <a href="javascript:;" class="checkInfoBtn fs4 c-blue">查看 <i class="fs4 c-blue vam icon icon-right"></i></a>
                                            </section>
                                        </section>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card u-myAccount-infinite-card" style="height: auto">
                        <div class="card-header">
                            <strong class="fs7">2017年</strong>
                        </div>
                        <div class="card-content">
                            <div class="card-content-inner">
                                <div class="list-block">
                                    <div class="pl75">
                                        <section class="item-inner">
                                            <section>
                                                <aside><span class="fs7">微信</span></aside>
                                                <span class="fs4 c-888">提：11.20 20:22 / 到：11.58 10:34</span>
                                            </section>
                                            <section class="text-right">
                                                <aside><span class="fs4">￥</span><span>233</span></aside>
                                                <span class="c-green fs4">已提现</span>
                                            </section>
                                        </section>
                                        <section class="item-inner">
                                            <section>
                                                <aside><span class="fs7">支付宝</span></aside>
                                                <span class="fs4 c-888">提：11.20 20:22 / 到：11.58 10:34</span>
                                            </section>
                                            <section class="text-right">
                                                <aside><span class="fs4">￥</span><span>233</span></aside>
                                                <span class="c-orange fs4">审核中</span>
                                            </section>
                                        </section>
                                        <section class="item-inner">
                                            <section>
                                                <aside><span class="fs7">微信</span></aside>
                                                <span class="fs4 c-888">提：11.20 20:22 / 到：11.58 10:34</span>
                                            </section>
                                            <section class="text-right">
                                                <aside><span class="fs4">￥</span><span>233</span></aside>
                                                <span class="c-red fs4">未通过</span>
                                                <a href="javascript:;" class="checkInfoBtn fs4 c-blue">查看 <i class="fs4 c-blue vam icon icon-right"></i></a>
                                            </section>
                                        </section>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </article>
</div>

<!--查看详情 开始-->
<textarea id="checkInfo-ele" class="hide">
    <div class="pr pt5 pb5">
        <aside class="exam-stop-icon checkInfo-icon"><span>&nbsp;</span></aside>
        <section class="text-center">
            <h3 class="" style="margin-bottom: 0;font-weight: 200;">查看明细</h3>
            <span class="fs6 c-888">您本次提现申请未通过运营审核，原因如下：</span>
        </section>
        <section style="text-align: left">
            <span class="fs6 c-333">1、账户违规，已经冻结</span>
            <br>
            <span class="fs6 c-333">2、具体情况请联系在线客服</span>
        </section>
    </div>
</textarea>
<div class="modal-overlay"></div>
<!--查看详情 结束-->
<div data-th-replace="layout/footer"></div>
<script type="text/javascript">
    $(function () {
        sortSelFn()
        checkInfoFn()
    })
    // 分类筛选
    function sortSelFn() {
        var bEle = $('.wm-cl__wrap');
        $('.wm-buttons-select-tab__wrap').on('click', '.tab-link', function () {
            if($(this).hasClass('active')){
                if(bEle.hasClass('sortSeOpen')){
                    bEle.removeClass('sortSeOpen');
                }else {
                    bEle.addClass('sortSeOpen');
                }
            }else {
                activeFilterCondition(this);
                bEle.addClass('sortSeOpen');
            }
        });
        $('.modal-overlay').on('click', function () {
            if (bEle.hasClass('sortSeOpen')){
                bEle.removeClass('sortSeOpen');
            }
        });
    }
    // 专业 课程类型 排序筛选器
    function activeFilterCondition(obj) {
        $(obj).addClass('active').siblings().removeClass('active');
    }

    // 查看详情
    var checkInfoFn = function () {
        var _ele = $('#checkInfo-ele').val();
        $(document).on('click', '.checkInfoBtn', function () {
            $.alert(_ele)
            $('.modal-in').find('.modal-button-bold').text('知道了').attr('style', '');
        })
    }
</script>
</body>
</html>
